<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel app\models\ToliteHistorySearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = $toilet[0]['cname'];
//$this->params['breadcrumbs'][] = ['label' => '所有厕所状态', 'url' => ['tolite-current/index']];
$this->params['breadcrumbs'][] = $this->title;
?>

<div class="toilet-charts-index">
    <div>
    <h1 class=".text-left"><?= Html::encode($this->title) ?></h1>
    </div>
    <script src="http://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>

    <div class="graphs">
        <div style="height:360px" class="graph"><canvas id="ch_use"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_flow"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_flow_hour"></canvas></div>
        <div class="pull-right">
            <a href="index.php?r=current-toilet/flow&id=<?=$current[0]['t_id']?>">查看流量统计</a>
        </div>
        <div style="height:360px" class="graph"><canvas id="ch_temp"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_temp_hour"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_humi"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_humi_hour"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_gas"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_gas_hour"></canvas></div>
    </div>


</div>
<script language="JavaScript">
    var times = [<?php $cn=count($use_history);for($i=$cn-1;$i>0;$i--){echo '"'.substr($use_history[$i]['time'],11,17).'",';}?>]
    var chart1 = document.getElementById('ch_use').getContext('2d');
    var chart_use = new Chart(chart1, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '使用人数（当前）',
                data: [<?php $seats=$current[0]['seats'];$cn=count($use_history);for($i=$cn-1;$i>0;$i--){echo ($seats-$use_history[$i]['unuse']).',';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            scales: {
                yAxes : [{
                    ticks : {
                        max : <?= $seats ?>,    
                        min : 0
                    }
                }],
            },
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($flow);for($i=$cn-1;$i>0;$i--){echo '"'.substr($flow[$i]['time'],11,17).'",';}?>]
    var chart2 = document.getElementById('ch_flow').getContext('2d');
    var chart_flow = new Chart(chart2, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '人流量（当前）',
                data: [<?php $cn=count($flow);for($i=$cn-1;$i>0;$i--){echo '"'.$flow[$i]['num'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($gas);for($i=$cn-1;$i>0;$i--){echo '"'.substr($gas[$i]['time'],11,17).'",';}?>]
    var chart3 = document.getElementById('ch_temp').getContext('2d');
    var chart_gast = new Chart(chart3, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '温度（当前）',
                data: [<?php $cn=count($gas);for($i=$cn-1;$i>0;$i--){echo '"'.$gas[$i]['tem'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            scales: {
                yAxes : [{
                    ticks : {
                        max : 40,    
                        min : -30
                    }
                }],
            },
            maintainAspectRatio: false
        }
    });
    var chart4 = document.getElementById('ch_humi').getContext('2d');
    var chart_gash = new Chart(chart4, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '湿度（当前）',
                data: [<?php $cn=count($gas);for($i=$cn-1;$i>0;$i--){echo '"'.$gas[$i]['hum'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                },
            scales: {
                yAxes : [{
                    ticks : {
                        max : 99,    
                        min : 0
                    }
                }],
            },
            maintainAspectRatio: false
        }
    });
    var chart5 = document.getElementById('ch_gas').getContext('2d');
    var chart_gasg = new Chart(chart5, {
        type: 'line',
        data: {
            xLabels: times,
            yLabels:["未知","优","良","差"],

            datasets: [{
                label: '空气质量（当前）',
                data: [<?php $cn=count($gas);$arr=["未知","优","良","差"];for($i=$cn-1;$i>0;$i--){echo '"'.$arr[$gas[$i]['gas']].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {responsive: true,
                    tooltips: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {yAxes: [{type: 'category',position: 'left',display: true,scaleLabel: {display: true,},ticks: {reverse: true}}],},
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($flow_hour);for($i=0;$i<$cn;$i++){echo '"'.substr($flow_hour[$i]['time'],11,17).'",';}?>]
    var chart6 = document.getElementById('ch_flow_hour').getContext('2d');
    var chart_flow = new Chart(chart6, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '人流量（当日）',
                data: [<?php $cn=count($flow_hour);for($i=0;$i<$cn;$i++){echo '"'.$flow_hour[$i]['num'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($gas_hour);for($i=0;$i<$cn;$i++){echo '"'.substr($gas_hour[$i]['time'],11,17).'",';}?>]
    var chart7 = document.getElementById('ch_temp_hour').getContext('2d');
    var chart_flow = new Chart(chart7, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '温度（当日）',
                data: [<?php $cn=count($gas_hour);for($i=0;$i<$cn;$i++){echo '"'.$gas_hour[$i]['tem'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            scales: {
                yAxes : [{
                    ticks : {
                        max : 40,    
                        min : -30
                    }
                }],
            },
            maintainAspectRatio: false
        }
    });
    var chart8 = document.getElementById('ch_humi_hour').getContext('2d');
    var chart_flow = new Chart(chart8, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '湿度（当日）',
                data: [<?php $cn=count($gas_hour);for($i=0;$i<$cn;$i++){echo '"'.$gas_hour[$i]['hum'].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            scales: {
                yAxes : [{
                    ticks : {
                        max : 99,    
                        min : 0
                    }
                }],
            },
            maintainAspectRatio: false
        }
    });
    var chart9 = document.getElementById('ch_gas_hour').getContext('2d');
    var chart_flow = new Chart(chart9, {
        type: 'line',
        data: {
            xLabels: times,
            yLabels:["未知","优","良","差"],
            datasets: [{
                label: '空气质量（当日）',
                data: [<?php $cn=count($gas_hour);$arr=["未知","优","良","差"];for($i=0;$i<$cn;$i++){echo '"'.$arr[$gas_hour[$i]['gas']].'",';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {responsive: true,
                    tooltips: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {yAxes: [{type: 'category',position: 'left',display: true,scaleLabel: {display: true,},ticks: {reverse: true}}],},
            maintainAspectRatio: false
        }
    });
</script>